<template>
  <div class="detail">
    <detail-nav-bar :i="currentIndex" @titleClick="titleClickHandler"></detail-nav-bar>
    <scroll @scroll="scroll" :probe-type="3" ref="scroll" class="wrapper">
      <detail-swiper :topImages="topImages"></detail-swiper>
      <detail-base-info :baseInfo="baseInfo"></detail-base-info>
      <detail-shop-info :shopInfo="shopInfo"></detail-shop-info>
      <detail-good-info @loadImage="loadImage" :goodsInfo="goodsInfo"></detail-good-info>
      <detail-item-params ref="p1" :itemParams="itemParams"></detail-item-params>
      <detail-rate ref="p2" :rate="rate"></detail-rate>
      <detail-recommend ref="p3" :goods="recommends"></detail-recommend>
    </scroll>
    <detail-bottom-bar @addToCart="addToCart"></detail-bottom-bar>
  </div>
</template>

<script>
  import DetailNavBar from "@/views/detail/childComps/DetailNavBar";
  import DetailSwiper from "@/views/detail/childComps/DetailSwiper";
  import DetailBaseInfo from "@/views/detail/childComps/DetailBaseInfo";
  import DetailShopInfo from "@/views/detail/childComps/DetailShopInfo";
  import DetailGoodInfo from "@/views/detail/childComps/DetailGoodInfo";
  import DetailItemParams from "@/views/detail/childComps/DetailItemParams";
  import DetailRate from "@/views/detail/childComps/DetailRate";
  import DetailRecommend from "@/views/detail/childComps/DetailRecommend";
  import DetailBottomBar from "@/views/detail/childComps/DetailBottomBar";

  import Scroll from "@/components/common/scroll/Scroll";

  import {getGoodDetail, getRecommendGood} from "@/network/detail";

  import {mapMutations} from 'vuex'

  export default {
    name: "Detail",
    data() {
      return {
        iid: "",
        topImages: [],
        baseInfo: {},
        shopInfo: {},
        goodsInfo: {},
        itemParams: {},
        rate: {},
        recommends: [],
        currentIndex: 0,
        y1: 0,
        y2: 0,
        y3: 0
      }
    },
    methods: {
      ...mapMutations(["addProduct"]),
      loadImage() {
        this.y1 = this.$refs.p1.$el.offsetTop;
        this.y2 = this.$refs.p2.$el.offsetTop;
        this.y3 = this.$refs.p3.$el.offsetTop;
      },
      titleClickHandler(index) {
        if (index == 0) {
          this.$refs.scroll.bscroll.scrollTo(0, 0, 1000);
        }
        if (index == 1) {
          this.$refs.scroll.bscroll.scrollToElement(this.$refs.p1.$el, 1000);
        }
        if (index == 2) {
          this.$refs.scroll.bscroll.scrollToElement(this.$refs.p2.$el, 1000);
        }
        if (index == 3) {
          this.$refs.scroll.bscroll.scrollToElement(this.$refs.p3.$el, 1000);
        }

      },
      scroll(position) {
        let now = -(position.y);
        if (now < this.y1) {
          this.currentIndex = 0;
        } else if (now < this.y2) {
          this.currentIndex = 1;
        } else if (now < this.y3) {
          this.currentIndex = 2;
        } else if (now > this.y3) {
          this.currentIndex = 3;
        }

      },
      addToCart() {
        // 1.获取购物车需要展示的信息
        const product = {};
        product.image = this.topImages[0];
        product.title = this.baseInfo.title;
        product.price = this.baseInfo.price;
        product.desc = this.goodsInfo.desc;
        product.iid = this.iid;
        product.num = 1;


        // 2. 加入vuex
        // 2.1如果以上信息中有一个数据为空，则证明本页面没有加载完数据，添加购物车失败
        let flag = true;
        for (let key in product) {
          if (product[key] == undefined) {
            //有数据没加载完
            flag = false;

          }
        }
        // 2.2
        if (flag) {
          this.$toast.success("添加成功");
          this.addProduct(product);
        } else {
          this.$toast.fail("添加失败");
        }

      }
    },
    async mounted() {
      //00 总取
      let iid = this.$route.params.iid;
      this.iid = iid;
      let res = await getGoodDetail(iid);
      // console.log(res);

      //1 获取顶部图片轮播数据
      this.topImages = res.result.itemInfo.topImages;

      //2 获取商品信息基本数据
      // console.log(res.result.itemInfo)
      let title = res.result.itemInfo.title;
      let price = res.result.itemInfo.lowNowPrice;
      let oldPrice = res.result.itemInfo.lowPrice;
      let discountDesc = res.result.itemInfo.discountDesc;
      let columns = res.result.columns;
      this.baseInfo = {title, price, oldPrice, discountDesc, columns};

      //3 获取店铺信息
      let shopLogo = res.result.shopInfo.shopLogo;
      let name = res.result.shopInfo.name;
      let cSells = res.result.shopInfo.cSells;
      let cGoods = res.result.shopInfo.cGoods;
      let score = res.result.shopInfo.score;
      this.shopInfo = {shopLogo, name, cSells, cGoods, score};

      //4 获取商品详情图片信息
      let desc = res.result.detailInfo.desc;
      let detailImage = res.result.detailInfo.detailImage;
      this.goodsInfo = {desc, detailImage};

      //5 获取商品参数信息
      let info = res.result.itemParams.info;
      let rule = res.result.itemParams.rule;
      this.itemParams = {info, rule};

      //6 获取商品评论信息
      let avatar = res.result.rate.list[0].user.avatar;
      let uname = res.result.rate.list[0].user.uname;
      let content = res.result.rate.list[0].content;
      let created = new Date(res.result.rate.list[0].created).toLocaleDateString();
      let style = res.result.rate.list[0].style;
      let images = res.result.rate.list[0].images;
      this.rate = {avatar, uname, content, created, style, images};

      //7 商品推荐数据的展示
      let res2 = await getRecommendGood();
      let goods = res2.data.list;
      goods.map(good => {
        let temp = {
            show: {
              img: good.image
            },
            title: good.title,
            price: good.price,
            cfav: good.cfav,
            iid: good.shop_id
          }
        ;
        this.recommends.push(temp);
      });


    },
    components: {
      DetailNavBar,
      DetailSwiper,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodInfo,
      DetailItemParams,
      DetailRate,
      DetailRecommend,
      DetailBottomBar,
      Scroll
    }

  }
</script>

<style scoped>
  .detail {
    /*视口*/
    height: 100vh;

    position: relative;
    z-index: 1;
  }

  .wrapper {
    position: absolute;
    top: 44px;
    bottom: 50px;
    left: 0;
    right: 0;
    overflow: hidden;

    background-color: white;
  }
</style>
